<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入外部 CSS 文件，与登录页面共用或单独写，这里假设叫 style.css -->
    <link rel="stylesheet" href="./css/register.css">
    <title>注册页面</title>
</head>

<body>
<div class="register-container">
    <h1>欢迎注册</h1>
    <p>已有账号？<a href="/brand_demo_war/login.jsp">登录</a></p>
    <p id="register_msg" style="display:none ;color:  red;">用户名已存在</p><!-- 假设登录页是 login.html，可按需修改 -->
    <form action="/brand_demo_war/registerServlet" method="post">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>
        </div>
        <div class="form-group captcha-group">
            <label for="captcha">验证码</label>
            <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
            <img src="/brand_demo_war/CaptchaServlet" alt="验证码" id="captchaImage" style="vertical-align: middle;"><!-- 实际验证码图片地址，这里仅占位 -->
            <a href="#" class="refresh-captcha" id="changeCaptcha">换一张？</a>
        </div>
        <button type="submit" class="register-btn">注册</button>
    </form>
</div>
<script>
    document.getElementById("changeCaptcha").onclick = function refreshCaptcha() {
        var captchaImage = document.getElementById('captchaImage');
        // 添加随机参数防止缓存
        captchaImage.src = '/brand_demo_war/CaptchaServlet?t=' + new Date().getTime();
    };

    document.getElementById("username").onblur=function (){

        var username=this.value;
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("GET","http://localhost:8080/ajax_demo_war/registerServlet?username="+username,true);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {


                if(xmlhttp.responseText=="true"){
                    document.getElementById("register_msg").style.display='block';
                }else{
                    document.getElementById("register_msg").style.display='none';

                }
            }
        }
    };


</script>
</body>

</html>

